<template>
  <div class="supplier-common">
    <c-table
      :data="tableData.pageData"
      :total="tableData.total"
      :columns="columns"
      :loading="tableLoading"
      rowKey="companyId"
      search
      searchPlaceholder="请输入供应商名称进行搜索"
      @onSearch="onSearch"
      @onReload="reload"
    >
      <!-- <template v-slot:header-r>
        <c-search-box></c-search-box>
      </template> -->
      <template v-slot:creditList="row">
        <ul v-if="row.row.creditList" class="quotaList">
          <li v-for="item in row.row.creditList" :key="item.id">
            <c-tags
              :data="[
                {
                  label: item.categoryName + '  ' + item.futuresContractCode,
                  color: 'blue'
                }
              ]"
            ></c-tags>
            <i>：</i>
            <span>{{ item.availableCredit }}</span>
          </li>
        </ul>
      </template>
      <template v-slot:handle="{ row }">
        <div class="handle">
          <c-button type="link" @click="manage(row)">交易管理</c-button>
        </div>
      </template>
    </c-table>
    <c-modal title="交易管理" v-model="manageVisible" :width="800" noFooter>
      <manage
        :companyData="manageCompanyData"
        :businessDirection="2"
        @updated="reload"
      />
    </c-modal>
  </div>
</template>

<script>
import moment from "moment";
import { getProviders } from "@/api/supplier";
import manage from "@/views/customer-self/components/manage";

const columns = [
  {
    title: "公司全称",
    dataIndex: "companyName"
  },
  {
    title: "联系人",
    dataIndex: "realName"
  },
  {
    title: "联系电话",
    dataIndex: "phone"
  },
  {
    title: "采购额度",
    scopedSlots: { customRender: "creditList" }
  },
  {
    title: "操作",
    scopedSlots: { customRender: "handle" }
  }
];

export default {
  components: {
    manage
  },
  data() {
    return {
      searchKey: undefined,
      tableData: [],
      page: {
        num: 1,
        size: 20
      },
      tableLoading: false,
      columns,
      manageVisible: false,
      manageCompanyData: {},
      // 预设时间段
      preinstall: {
        最近30天: [
          moment()
            .startOf("day")
            .subtract(29, "days"),
          moment().endOf("day")
        ],
        最近60天: [
          moment()
            .startOf("day")
            .subtract(59, "days"),
          moment().endOf("day")
        ],
        最近90天: [
          moment()
            .startOf("day")
            .subtract(89, "days"),
          moment().endOf("day")
        ],
        最近180天: [
          moment()
            .startOf("day")
            .subtract(179, "days"),
          moment().endOf("day")
        ]
      }
    };
  },
  methods: {
    moment,
    // 搜索
    onSearch(val) {
      this.searchKey = val;
      this.reload();
    },
    // 导出数据
    exportData() {},
    // 刷新
    reload() {
      // this.page.num = 1
      this.getSuppliers();
    },
    // 打开交易管理
    manage(row) {
      this.manageVisible = true;
      this.manageCompanyData = row;
    },
    // 查询供应商列表
    getSuppliers() {
      this.tableLoading = true;
      getProviders({
        providerName: this.searchKey,
        pageData: {
          pageNum: this.page.num,
          pageSize: this.page.size
        }
      })
        .then(res => {
          this.tableData = res;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    }
  },
  created() {
    this.getSuppliers();
  }
};
</script>

<style lang="scss" scoped>
.quotaList {
  overflow: auto;
  max-height: 250px;
  li:not(:last-child) {
    margin-bottom: 2px;
  }
}
</style>
